<template>
    <ul class="listcontentbox" ref="ul">
        <li v-for="(item,index) in myarr" :key="item.id">
            <div @click="fasong(item.id,index)">
                <div class="indexsong">
                    <div class="listsongfont">
                        <div class="listsongtop">{{item.name}}</div>
                        <div class="listsongdown">{{item.people}}</div>
                    </div>
                </div>
                <span class="listdian">...</span>
            </div>
        </li>
        <li class="loading" v-show="!jiazai">
            <loading></loading>
        </li>
    </ul>
</template>
<script>
import loading from "./loading.vue"
export default {
    name:"listcontent",
    props:["gearr","gunle",'jiazai'],
    data(){
        return {
            myarr:[]
        }
    },
    components:{
        loading
    },
    mounted(){
        // this.$emit('chuanul',{
        //     height:
        // })
    },
    watch:{
        gearr: {
            handler(value) {
                // console.log(value);
                this.myarr = value
            },
            immediate: true,
        },
        gunle: {
            handler(value) {
                if(value){
                    this.gun()
                }
            },
            immediate: true,
        },
        jiazai: {
            handler(value) {
                
            },
            immediate: true,
        },
    },
    methods:{
        gun(){
            // console.log(this.$refs.ul.scrollHeight)
            this.$emit("ulgao",{
                height:this.$refs.ul.scrollHeight
            })
        },
        fasong(id,index){
            // this.$emit("gddg",{
            //     id,
            //     which:index
            // })
            this.$store.commit("changesongid",id)
            this.$store.commit("changelistwhich",index)
            this.$router.push({path:'/songdetails'})
        }
    }
}
</script>
<style lang="less" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color:#838383 ;
    -webkit-tap-highlight-color:transparent;
}
.listcontentbox{
    width: 100%;
    // height: 300px;
    background-color: #f8f8f8;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    position: absolute;
    top: 260px;
    padding-top:20px;
    // padding-bottom: 50px;
}
li{
    padding: 10px;
    box-sizing: border-box;
    margin: 10px auto;
    border-radius: 10px;
    background-color: white;
    width: 90%;
    position: relative;
}
//  .songimg{
//         width: 20%;
//         overflow: hidden;
//         border-radius: 5px;
//         font-size: 0px;
//         margin-right: 15px;

//         img{
//             width: 100%;
//         }
// }
    
    
</style>